<template>
  <el-dialog :visible.sync="visible" :title="title" append-to-body width="400px">
    <el-form size="mini">
      <el-form-item required label="预警名称：">
        <el-input v-model="formData.name" placeholder="请输入" style="width:200px;" />
      </el-form-item>
      <el-form-item required label="预警级别：">
        <el-select v-model="formData.level" placeholder="请选择" style="width:200px;">
          <el-option
            v-for="item in msmRecordMap"
            :key="item.key"
            :label="item.value"
            :value="item.key"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button size="mini" @click="handleClose">
        取消
      </el-button>
      <el-button size="mini" type="primary" @click="handleOk">
        保存
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { msmRecordMap } from '@/config/dict'
export default {
  data() {
    return {
      title: '添加配置',
      visible: false,
      formData: {},
      msmRecordMap
    }
  },
  methods: {
    open(data) {
      data = data || { level: null, name: null }
      this.$data.visible = true
      this.$data.formData = data
      return new Promise((resolve, reject) => {
        this.promistEmit = { resolve, reject }
      })
    },
    handleClose() {
      this.$data.visible = false
    },
    handleOk() {
      if (this.$data.formData.level === null) {
        this.$message({ type: 'warning', message: '请选择预警等级' })
        return
      }
      if (!this.$data.formData.name) {
        this.$message({ type: 'warning', message: '请输入预警名称' })
        return
      }
      this.promistEmit.resolve(this.$data.formData)
      this.$data.visible = false
    }
  }
}
</script>

<style>

</style>
